<template>
  <div>
    <div>
      姓名:
      <input type="text" v-model="uname" />
    </div>
    <div>
      年龄:
      <input type="number" v-model="age" />
    </div>
    <div>
      身高:
      <input type="number" v-model.number="height" />(米)
    </div>
    <div>
      体重:
      <input type="number" v-model.number="weight" /> (公斤)
    </div>
    <div>
      病史:
      <input type="text" v-model="history" />
    </div>
    <button @click="xianshi">诊断</button>
    <div v-show="flag">患者 {{ uname }} 的诊断结果:{{ BMI }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: '',
      age: 0,
      height: 0,
      weight: 0,
      history: '',
      flag: false
    }
  },
  computed: {
    BMI() {
      let str = this.weight / (this.height * this.height)
      console.log(str)
      if (str <= 18.5) {
        return '体重过轻'
      } else if (str > 18.5 && str <= 24.9) {
        return '正常'
      } else if (str > 24.9 && str <= 29.9) {
        return '体重过重'
      } else {
        return '肥胖'
      }
    }
  },
  methods: {
    xianshi() {
      this.flag = true
    }
  }
}
</script>

<style>
div {
  margin: 10px;
}
</style>
